html{
  font-size: 100px;
}

*{
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
  overflow: hidden;
}

#app{
  max-width: 540px;
  overflow: hidden;
}

.main-box{
  padding-top: .6rem;
  margin: 0 auto;
}

/* 转盘区域 */
.music-box{
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;

  .dis-box{
    width: 100%;
    height: 100%;
    background: url(../images/disc-plus.png) no-repeat;
    background-size: cover;
    animation: musicMove 20s linear infinite;
    animation-play-state: paused;
    
    .dis{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 1.55rem;
      height: 1.55rem;
      padding: 0.03rem;
      background: url(../images/disc_default.png)no-repeat;
      background-size: cover;
      border-radius: 50%;

      &>img{
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }
  }
  .play-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: .6rem;
    height: .6rem;
    background: url(../images/play_btn_3x.png) no-repeat;
    background-size: cover;
    // display: none;
  }
  /* 指针 */
  .needle{
    position: absolute;
    top: -0.52rem;
    right: 0.55rem;
    width: 0.74rem;
    height: 1.2rem;
    background: url(../images/needle-ab.png) no-repeat;
    background-size: cover;
    transform: rotate(355deg);
  }

}



/* 转盘转动 */
@keyframes musicMove {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}


/* 歌词部分 */
.lyric-box{
  overflow: hidden;
  padding-top: 0.3rem;
  text-align: center;
  color: #fefefe;
  
  .title{
    line-height: .35rem;
    font-size: .18rem;
    font-weight: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .text{
    line-height: .3rem;
    font-size: .16rem;
    height: .52rem;
    overflow: hidden;
    -webkit-mask: -webkit-linear-gradient(top,#000,#000 70%,rgba(0,0,0,0));
  }
  .wrapper{
    transform: translateY(0rem);
    transition: all .3s;
  }
}

/* 其他组件 */
.units-box{  
  display: flex;
  justify-content:center;
  align-items:center;
  height: .3rem;
  margin: 0 auto;
  margin-top: .2rem;
  color: hsla(0,0%,100%,.8);
  font-size: .14rem;
  &>div{
    width: 1.22rem;
    line-height: .3rem;
    text-align: center;
  }
  .left{
    position: relative;
    height: .27rem;
    // display: flex;
    .song-music{
      height: 100%;
      margin-right: .05rem;
    }
    .go-song-music{
      position: absolute;
      right: .12rem;
      top: 50%;
      margin-top: -0.075rem;
      height: .15rem;
    }
  }
  .right{
    display: flex;
    justify-content: center;
    align-items: center;
    .listen-music{
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      background: url(../images/listen_music.png)no-repeat;
      background-size: cover;
      margin-right: .03rem;
    }
    &>img{
      width: 0.15rem;
      height: 0.15rem;
    }
  }
  .seg{
    display: block;
    width: 1px;
    height: .14rem;
    background: hsla(0,0%,100%,.2);
  }

}

/* 背景层 */
.mark-overlay,
.mark-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mark-image {
  z-index: -2;
  background-color: rgb(41, 41, 41);

  // background-image: url('../images/music1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 180% 150%;
  filter: blur(35px); // 设置模糊度
}

.mark-overlay {
  z-index: -1;
  background: rgba(0, 0, 0, .5);
}